<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: cyan;
            position: relative;
            z-index: 1;
        }

        * {
            margin: 0;
        }

        #box2 {
            background-color: red;
            float: none;
            left: 100px;
            /* top: 100px; */
            width: 100px;
            height: 100px;
            position: relative;

        }
    </style>
</head>

<body>
    一段文字
    <div id="box">文志</div>
    <div id="box2"></div>
</body>
<script>
    window.onload = function () {
        var box = document.getElementById("box")

        //onmousedown 鼠标按下，事件
        box.onmousedown = function (even) {

            var f = even.clientX;
            var g = even.clientY;
            var f1 = box.offsetLeft;
            var g1 = box.offsetTop;
            console.log(f,g);
            console.log(f1,g1);
            var la = even.clientX - box.offsetLeft;
            var b = even.clientY - box.offsetTop;
            //onmousemove 鼠标移动事件
            document.onmousemove = function (a) {
                var x = a.clientX - la;
                var y = a.clientY - b;

                box.style.left = x + "px";
                box.style.top = y + "px";
                console.log(x,y);
            };

            //nomouseup 松掉鼠标事件。
            box.onmouseup = function () {
                document.onmousemove = null;
                console.log("松开了！");
            };

            var f2 = box.offsetLeft;
            var g2 = box.offsetTop;
            console.log(f2,g2);
        };


    }





</script>

</html>